<template>
  <el-button type="primary" @click="add(props)">添加</el-button>
  
       
  <el-table :data="roomData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%">


    <el-table-column prop="roomName" label="房间名" width="150" />
    <el-table-column prop="floor" label="楼层" width="100" />
    <el-table-column prop="departId1" label="id1" width="100" />
    <el-table-column prop="departId2" label="id2" width="100" />
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="row">
        <el-button type="success" @click="handleClick(row)"> 编辑 </el-button>
        <el-popconfirm title="确定要删除吗?" @confirm="del(row)">
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>        
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogVisible1" title="增加" width="30%">
    <el-form label-width="150px">
      <el-form-item label="房间名字">
        <el-input v-model="info1.roomName" />
      </el-form-item>
    </el-form>
    <el-form label-width="150px">
      <el-form-item label="楼层">
        <el-input v-model="info1.floor" />
      </el-form-item>
    </el-form>
    <el-form label-width="150px">
      <el-form-item label="id1">
        <el-input v-model="info1.departId1" />
      </el-form-item>
    </el-form>
    <el-form label-width="150px">
      <el-form-item label="id2">
        <el-input v-model="info1.departId2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="insert()" v-model="dialogVisible1"
          >确认</el-button
        >
      </span>


    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible" title="编辑" width="30%">


        <el-form label-width="150px">
      <el-form-item label="房间名字">
        <el-input v-model="revise_box.roomName" />
      </el-form-item>
    </el-form>
    <el-form label-width="150px">
      <el-form-item label="楼层">
        <el-input v-model="revise_box.floor" />
      </el-form-item>
    </el-form>
    <el-form label-width="150px">
      <el-form-item label="id1">
        <el-input v-model="revise_box.departId1" />
      </el-form-item>
    </el-form>
    <el-form label-width="150px">
      <el-form-item label="id2">
        <el-input v-model="revise_box.departId2" />
      </el-form-item>
    </el-form>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="edit()" v-model="dialogVisible"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>

   <!-- 分页 -->
<el-pagination
layout="total,sizes,prev,pager,next,jumper" :total="roomData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>



</template>
<script>
import { ElMessage } from 'element-plus'
import { get } from '@/utils/request'
export default {
  data() {
    return {

      currentPage: 1, //默认页码为1
      pagesize: 10, //默认一页显示10条


      dialogVisible: false, //修改对话框是否可见
      dialogVisible1: false, //增加对话框是否可见
      revise_box: {}, //修改
      info1: {}, //是一个对象增加的科室内容
      roomData: []
    }
  },
  //初始化工作
  mounted() {
    get('/getAllrooms').then((res) => {
      this.roomData = res.data
      console.log(res)
    })
  },

  methods: {

    handleSizeChange: function (size) {
      //一页显示多少条
      this.pagesize = size
    },
    handleCurrentChange: function (currentPage) {
      //页码更改方法
      this.currentPage = currentPage
    },

    handleClick(data) {
      this.revise_box = data.row //把数据放到revise_box里边
      //打印revise_box
      // console.log(this.info)
      this.dialogVisible = !this.dialogVisible
    },
    del(data) {
      get('/deleteRoom', { roomId: data.row.roomId }).then(
        (res) => {
          ElMessage({
            message: '删除成功！',
            type: 'success'
          })
          window.location.reload()
        }
      )
    },
    //修改
    edit() {
      this.dialogVisible = !this.dialogVisible //马上消失
      //作用是调整下createTime的格式
      var dt = new Date(this.revise_box.createTime)
      let year = dt.getFullYear()
      let month = dt.getMonth() + 1
      let date = dt.getDate()
      this.revise_box.createTime = year + '/' + month + '/' + date
      get('/updateRoom', this.revise_box).then((res) => {
        ElMessage({
          message: '修改成功！',
          type: 'success'
        })
        //window.location.reload()
      })
    },

    add() {
      this.dialogVisible1 = !this.dialogVisible1
    },

    insert() {
      this.dialogVisible1 = !this.dialogVisible1
      get('/addRoom',this.info1).then((res) => {
        console.log(res);
        if(res.data==1)
        {
        ElMessage({
           message: "添加成功",
           type: "success"
         })
        window.location.reload()
        }else
        {
          ElMessage({
           message: "添加失败",
           type: "danger"
          
        })
      }
    })
  }
  }
}
</script>

<style>
</style>
